<template>
  <a-card :bordered="false" :style="{ minHeight: `${layoutCardHeight}px` }">
    <div style="margin-bottom: 10px"><span style="font-weight: bold">模块名称：</span>{{ modelName }}</div>
    <a-button v-action:add style="margin-bottom: 18px" type="primary" icon="plus" @click="addAttribute">{{
      $t('technology.uda.addAttribute')
    }}</a-button>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :showPagination="false"
      :scroll="{ x: tableWidth }"
    >
      ><template slot="beUnique" slot-scope="text">
        {{ text | booleanFilter }}
      </template>
      <template slot="beNull" slot-scope="text">
        {{ text | booleanFilter }}
      </template>
      <span slot="action" slot-scope="text, record, index" class="actionsList">
        <a
          v-action:edit
          :disabled="record.allowDelete === 0"
          href="#"
          @click="record.allowDelete !== 0 && $refs.extensionForm.open(tableName, record)"
          >{{ $t('common.edit') }}</a
        >
        <a-divider v-action:delete type="vertical" />
        <a-popconfirm
          title="确认需要删除该属性吗？"
          okText="确定"
          cancelText="取消"
          @confirm="record.allowDelete !== 0 && handleDeleteAttribute(record.id)"
        >
          <a v-action:delete :disabled="record.allowDelete === 0" href="#" class="link-danger">{{
            $t('common.delete')
          }}</a>
        </a-popconfirm>
        <a-divider v-action:edit type="vertical" />
        <a-popconfirm
          title="确认需要上移该属性吗？"
          okText="确定"
          cancelText="取消"
          @confirm="handleMoveUpAttribute(record.id)"
        >
          <a v-action:edit :disabled="index === 0" href="javascript:;">{{ $t('common.moveUp') }}</a>
        </a-popconfirm>
        <a-divider v-action:edit type="vertical" />
        <a-popconfirm
          title="确认需要下移该属性吗？"
          okText="确定"
          cancelText="取消"
          @confirm="handleMoveDownAttribute(record.id)"
        >
          <a v-action:edit :disabled="index === dataLength - 1" href="javascript:;">{{ $t('common.moveDown') }}</a>
        </a-popconfirm>
      </span>
    </s-table>
    <extension-form ref="extensionForm" @ok="() => $refs.table.refresh()" />
  </a-card>
</template>

<script>
import { layoutMixin } from '@/utils/mixin';
import { STable } from '@/components';
import {
  getUdaModelExtensionPageList,
  deleteUdaModelExtension,
  putUdaModelExtensionMoveUp,
  putUdaModelExtensionMoveDown
} from '@/api/technology/Uda/UDA模型表内置字段及扩展字段';
import ExtensionForm from '@/views/technology/Uda/modules/ExtensionForm';
import { ATTRIBUTE_TYPE_ENUM } from '@/utils/enum';

export default {
  name: 'SetExtension',
  mixins: [layoutMixin],
  components: {
    STable,
    ExtensionForm
  },
  data() {
    return {
      tableName: this.$route.query.tableName || '',
      modelName: this.$route.query.modelName || '',
      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        if (!this.tableName) {
          this.$router.go(-1);
          return;
        }
        const req = {
          ...params,
          tableName: this.tableName,
          pageNo: 1,
          pageSize: 999
        };
        return getUdaModelExtensionPageList(req).then(res => {
          // 记录一些信息用于上下移动的一些限制
          this.dataLength = res.data.data.length;
          return res.data;
        });
      },
      // 记录列表第一项和最后一项，用于上移下移的禁用
      dataLength: 0,
      ATTRIBUTE_TYPE_ENUM
    };
  },
  computed: {
    columns() {
      let colums = [
        {
          title: this.$t('common.index'),
          fixed: 'left',
          dataIndex: 'index',
          width: 100,
          customRender: (text, record, index) => index + 1
        },
        {
          title: this.$t('common.name'),
          dataIndex: 'attributeName',
          width: 200,
          ellipsis: true,
          sorter: (a, b) => a.attributeName.localeCompare(b.attributeName)
        },
        {
          title: this.$t('common.type'),
          dataIndex: 'attributeType',
          width: 120,
          customRender: text => this.$t(this.$options.filters.attributeTypeFilter(text))
        },
        {
          title: this.$t('technology.uda.propIdentity'),
          dataIndex: 'attributeTag',
          width: 200,
          ellipsis: true,
          sorter: (a, b) => a.attributeTag.localeCompare(b.attributeTag)
        },
        {
          title: this.$t('technology.uda.isUnique'),
          dataIndex: 'beUnique',
          width: 120,
          ellipsis: true,
          scopedSlots: {
            customRender: 'beUnique'
          }
        },
        {
          title: this.$t('technology.uda.nullable'),
          dataIndex: 'beNull',
          width: 120,
          ellipsis: true,
          scopedSlots: {
            customRender: 'beNull'
          }
        }
      ];
      if (this.$auth('edit,delete', this.$route.meta.permissionId)) {
        colums = colums.concat({
          title: this.$t('common.action'),
          fixed: 'right',
          width: 300,
          align: 'center',
          scopedSlots: {
            customRender: 'action'
          }
        });
      }
      return colums;
    },
    tableWidth() {
      const width = this.columns.reduce((last, next) => {
        last += next.width;
        return last;
      }, 0);
      return width;
    }
  },
  created() {},
  methods: {
    // 新建属性
    addAttribute() {
      this.$refs.extensionForm.open(this.tableName);
    },
    // 删除属性
    async handleDeleteAttribute(id) {
      deleteUdaModelExtension({
        id
      }).then(res => {
        if (res.code === 'sso.ok') {
          this.$message.success(res.message);
          this.$refs.table.refresh();
        }
      });
    },
    // 上移属性
    async handleMoveUpAttribute(id) {
      putUdaModelExtensionMoveUp({
        id,
        tableName: this.tableName
      }).then(res => {
        if (res.code === 'sso.ok') {
          this.$message.success(res.message);
          this.$refs.table.refresh();
        }
      });
    },
    // 下移属性
    handleMoveDownAttribute(id) {
      putUdaModelExtensionMoveDown({
        id,
        tableName: this.tableName
      }).then(res => {
        if (res.code === 'sso.ok') {
          this.$message.success(res.message);
          this.$refs.table.refresh();
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.table-operator {
  text-align: right;
}
</style>
